import {
  FaDiscord,
  FaRedditAlien,
  FaTelegramPlane,
  FaTwitter,
} from "react-icons/fa";

import { Separator } from "@/components/ui/separator";
import Logo from "@/components/ui/logo";

const sections = [
  {
    title: "Product",
    links: [
      { name: "Overview", href: "#" },
      { name: "Features", href: "#" },
      { name: "Integrations", href: "#" },
    ],
  },
  {
    title: "Company",
    links: [
      { name: "About", href: "#" },
      { name: "Blog", href: "#" },
      { name: "Contact", href: "#" },
    ],
  },
];

const Footer = () => {
  return (
    <footer className="pb-16">
      <Separator className="my-16" />
      <div className="container mx-auto px-6 md:px-0 text-center md:text-left">
        <div className="relative mb-8 flex w-full flex-col gap-x-20 gap-y-8 md:flex-row md:justify-between md:gap-y-0">
          <div className="mx-w-96">
            <div className="mb-6 flex items-center gap-3">
              <Logo />
            </div>
            <p className="text-base font-medium text-muted-foreground">
              Save money and time with SuperSavely.
            </p>
          </div>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
            {sections.map((section, sectionIdx) => (
              <div key={sectionIdx}>
                <h3 className="mb-4 font-bold">{section.title}</h3>
                <ul className="space-y-4 text-muted-foreground">
                  {section.links.map((link, linkIdx) => (
                    <li
                      key={linkIdx}
                      className="font-medium hover:text-primary"
                    >
                      <a href={link.href}>{link.name}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
            <div>
              <h3 className="mb-4 font-bold">Social</h3>
              <ul className="flex items-center justify-center md:justify-start space-x-6 text-muted-foreground">
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaDiscord className="size-6" />
                  </a>
                </li>
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaRedditAlien className="size-6" />
                  </a>
                </li>
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaTwitter className="size-6" />
                  </a>
                </li>
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaTelegramPlane className="size-6" />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="border-t border-border pt-8 flex flex-col text-center justify-center md:items-baseline md:justify-between gap-8 md:flex-row md:gap-16">
          <div className="text-xs text-muted-foreground sm:text-sm ">
            © 2024 SuperSavely. All rights reserved.
          </div>
          <div className="flex flex-col items-center md:items-start gap-4 text-xs text-muted-foreground sm:text-sm md:flex-row lg:items-center">
            <a href="#" className="hover:text-accent-foreground">
              Terms
            </a>
            <a href="#" className="hover:text-accent-foreground">
              Privacy Policy
            </a>
            <a href="#" className="hover:text-accent-foreground">
              Cookies
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
